<template>
  <div style="background-color: #fff">
    <!--意向单详情 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">商品管理列表</el-button>
      </div>
    </div>

    <div class="detail">
      <h3 style="font-size: 38px">意向单详情</h3>
      <!-- 我咨询的商品 -->
      <div
        class="ml80"
        style="
          border-left: 2px solid #eef0f6;
          font-weight: bold;
          padding-left: 5px;
          margin-bottom: 20px;
        "
      >
        客户咨询的商品
      </div>
      <div class="ml80">商品名称：供应重庆中捷立式加工中心导轨防护罩护板</div>
      <div>
        <table class="ml80" border="1" cellspacing="0" align="center">
          <thead>
            <tr v-for="item in 3">
              <th>商品特性</th>
              <td>
                <!-- <input
                  type="text"
                  style="width: 100%; height: 100%; border: 0; outline: none"
                  placeholder=""
                /> -->
              </td>
              <th>型号</th>
              <td>
                <!-- <input
                  type="text"
                  style="width: 100%; height: 100%; border: 0; outline: none"
                /> -->
              </td>
              <th>发货期限</th>
              <td>
                <!-- <input
                  type="text"
                  style="width: 100%; height: 100%; border: 0; outline: none"
                /> -->
              </td>
            </tr>
          </thead>
        </table>
      </div>
      <!-- 商品图片 -->
      <div class="ml80 i">
        商品图片：
        <el-popover
          placement="bottom"
          title="Title"
          :width="200"
          trigger="click"
          content="this is content, this is content, this is content"
        >
          <template #reference>
            <img src="" alt="" />
          </template>
        </el-popover>

        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
      </div>

      <div
        class="ml80"
        style="
          font-size: 12px;
          color: #abb3c3;
          font-weight: 400;
          margin-bottom: 30px;
          margin-top: 10px;
        "
      >
        点击产品缩略图，放大产品图片
      </div>
    </div>
    <hr />
    <!-- 联系方式 -->
    <div class="contact">
      <!-- 我的联系方式 -->
      <div
        class="ml80"
        style="
          border-left: 2px solid #eef0f6;
          font-weight: bold;
          padding-left: 5px;
          margin-bottom: 20px;
          width: 112px;
          height: 16px;
        "
      >
        客户的联系方式
      </div>

      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <div style="display: flex">
            <el-form-item label="姓名：" prop="name">
              <el-input class="input" v-model="ruleForm.name" />
            </el-form-item>

            <el-form-item label="联系电话：" prop="tel">
              <el-input class="input" v-model="ruleForm.tel" />
            </el-form-item>
          </div>

          <el-form-item prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>

          <div class="center">
            <el-form-item class="btnAddEdit">
              <el-button
                type="primary"
                @click="resetForm(ruleFormRef)"
                style="
                  width: 90px;
                  height: 36px;
                  background: #fff;
                  color: #000;
                  border: 1px solid #dcdfe5;
                "
              >
                取消
              </el-button>
              <el-button
                @click="submitForm(ruleFormRef)"
                style="
                  width: 90px;
                  height: 36px;
                  background: #3091fb;
                  color: #fff;
                "
                >编辑</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import top from "../../../components/top/top.vue";
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "", //姓名
  desc: "", //内容
  tel: "", //电话
});

// 跳转
const router = useRouter();

// 按钮
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const resetForm = (formEl) => {
  router.push("/intentionManage");
};
</script>
<style>
.el-textarea__inner {
  width: 472px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  opacity: 1;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.detail {
  width: 901px;
  margin-left: 10px;

  h3 {
    margin: 30px 0 30px 343px;
  }
}

table {
  margin: 10px 0 20px 0;

  thead {
    tr {
      font-size: 12px;
      box-sizing: border-box;

      td {
        width: 120px;
        height: 30px;
        color: #333333;
        padding-left: 14px;
        box-sizing: border-box;
      }

      th {
        width: 120px;
        height: 30px;
        background: #f8f8f8;
        font-weight: normal;
        color: #acacac;
      }
    }
  }
}

// img图片
.i {
  display: flex;
  align-items: center;

  img {
    width: 80px;
    height: 80px;
    background: #d6d6d6;
    border-radius: 8px;
    margin: 0 10px;
  }
}

.contact {
  // width: 901px;
  margin: 30px 0 20px 0;

  // input
  .input {
    width: 170px;
    height: 30px;
  }

  .center {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    // margin-top: 231px;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.ml80 {
  margin-left: 80px;
}
</style>
